import React, { useState, useCallback } from 'react'

// React.memo 是用来缓存一个组件用的，只有组件内容的内容发生改变才会被重新渲染
const Child = React.memo((props) => {

    console.log('Child被执行了');
    return <h1 onClick={() => {
        props.changeName('王五')
    }}>Child - {props.name}</h1>
})


export default function App() {

    const [count, setcount] = useState(100)
    const [name, setname] = useState('张三')


    // useCallback: 接收两个参数
    // 参数一： 是一个回调函数，这个回调函数就是我们需要缓存的函数
    // 参数二： 是一个依赖数组，只有依赖被改变才会执行
    // useCallback 是用来缓存一个函数用的
    const changeName = useCallback((val) => {
        setname(val)
    }, [])

    return (
        <div>
            <h1>App - {count}</h1>
            <button onClick={() => {
                setcount(count + 1)
            }}>点击加 1</button>


            <hr />

            {/* 
                每次 count 发生改变的时候，都会导致 Child 组件被重新渲染，但是 count 
                的改变和 Child 组件又没有任何关联。
                如果每次都重新渲染子组件，会太浪费资源了，所以有没有什么办法可以让 count 
                的改变不影响子组件的渲染
            */}
            <Child name={name} changeName={changeName} />
        </div>
    )
}
